<template>
   <div style="height: 100%">
      <el-container style="height: 100%">


         <el-main style="padding: 0">
            <!-- header头 -->
            <el-header style="padding: 0 !important">
               <MainHeader></MainHeader>
            </el-header>

            <el-container style="height: calc(100% - 60px); background: #f0f2f6" v-loading="isLoading"
               element-loading-text="加载中">
               <!-- 视图窗口 -->
               <el-scrollbar style="width: 100%; height: 100%" view-style="height: 100%">
                  <router-view style="
                        width: 100%;
                        height: 100%;
                        background: #f0f2f6;
                        padding: 10px;
                     "></router-view>
               </el-scrollbar>
            </el-container>
         </el-main>
      </el-container>
   </div>
</template>

<script>

import MainHeader from "@/components/MainHeader.vue";

import { useStore } from "vuex";
import { computed } from "vue";

export default {
   name: "MainContainer",
   components: {

      MainHeader
   },
   setup() {
      const store = useStore();

      let isLoading = computed(() => {
         return store.state.isLoading;
      });

      let asideShow = computed(() => {
         return store.state.asideShow;
      });

      return {
         isLoading,
         asideShow,
      };
   },
};
</script>

<style scoped></style>
